var canvas;
var ctx;
var con;

function init(){
	canvas = document.getElementById("mycanvas");
	ctx = canvas.getContext("2d");
	ctx.fillStyle="#FFF"; 
	ctx.fillRect(100,100,600,600);
	Sierpinski(100,100,600,600,3,'#F00');
	var Controls = function() {  //控制类，用来控制参数
		this.n = 3;  
		this.color = "#F00";
		this.redraw = function() { //重绘函数，当gui参数改变时调用
			ctx.fillStyle="#FFF"; 
			ctx.fillRect(100,100,600,600); 
		   	Sierpinski(100,100,600,600,this.n,this.color); 
		} 
	}
	var con = new Controls();
	var gui = new dat.GUI();  
	var conn = gui.add(con,'n',1,6).step(1);
	var conc = gui.addColor(con, 'color');
	conc.onChange(function() {
		con.redraw();
	});
	conn.onChange(function() {
		con.redraw();
	});
}

function Sierpinski(x,y,width,height,n,c){
	if(n==1)filled(x,y,width,height,c);
	else{
		var w=width/3;
		var h=height/3;
		for(var i=0;i<3;i++){
			for(var j=0;j<3;j++){
				if(i==1 && j==1){
					filled(x,y,width,height,c);
				}
				else{
					Sierpinski(x+i*w,y+j*h,w,h,n-1,c);
				}
			}
		}		
	}
}

function filled(x,y,width,height,c){
	ctx.fillStyle=c; 
	ctx.fillRect(x+width/3,y+height/3,width/3,height/3);
}

init();

